<template>
  <div id="song-list">
    <div class="title" @click="routerGo">推荐歌单<span>></span></div>
    <SongList>
      <SongListItem :songList="songList"/>
    </SongList>
  </div>
</template>

<script>
  import SongList from "@/components/content/songlist/SongList";
  import SongListItem from "@/components/content/songlist/SongListItem";
  export default {
    name: "SongListRec",
    components:{
      SongList,
      SongListItem,
    },
    props:{
      songList:{
        type:Array,
        default (){
          return []
        }
      }
    },
    data(){
      return {

      }
    },
    methods:{
      routerGo(){
        this.$router.push('/home/songList')
      },
    },

  }
</script>

<style scoped>
  #song-list{
    /*padding-bottom: 20px;*/
  }
  .title{
    width: 90px;
    height: 37px;
    line-height: 37px;
    margin: 0 10px;
    color: #2a2727;
    cursor: pointer;
    font-size: 16px;
    font-weight: 550;
  }
  .title span{
    margin-left: 3px;
  }
</style>
